// =================================简单自定义渲染===========================================
/**
 * 自定义之后可以渲染自己想要的
 */
import { customElements, customConfig } from '../util/util' // 导入公共方法和配置
// 创建Svg
import { append as svgAppend, create as svgCreate } from 'tiny-svg'

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer' // 引入默认的renderer
const HIGH_PRIORITY = 1500 // 最高优先级
export default class CustomRenderer extends BaseRenderer {
  // 继承BaseRenderer
  constructor (eventBus, bpmnRenderer) {
    super(eventBus, HIGH_PRIORITY)
    this.bpmnRenderer = bpmnRenderer
  }

  canRender (element) {
    // 忽略标签
    return !element.labelTarget
  }

  drawShape (parentNode, element) {
    // 核心函数就是绘制shape
    const type = element.type // 获取到类型
    if (customElements.includes(type)) {
      // or customConfig[type]
      const {
        url,
        attr
      } = customConfig[type]
      const customIcon = svgCreate('image', {
        // 在这里创建了一个image
        ...attr,
        href: url
      })
      console.log(customIcon)
      // 可以看到,实现让页面渲染出自己想要的效果的做法就是使用svgCreate方法创建一个image并添加到父节点中.
      element.width = attr.width // 这里我是取了巧, 直接修改了元素的宽高 设定这个玩意的宽高
      element.height = attr.height
      svgAppend(parentNode, customIcon)
      return customIcon
    }
    const shape = this.bpmnRenderer.drawShape(parentNode, element)
    return shape
  }

  getShapePath (shape) {
    return this.bpmnRenderer.getShapePath(shape)
  }
}

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer']
